<template>
  <section>
    <BaseSlot ref="view" :globalLoading="globalLoading">
      <template slot="table">
        <el-row>
          <OrderDetail :data="orderData" />
        </el-row>
        <el-row type="flex" justify="sapce-between" class="mr_vertical_10" :gutter="20">
          <el-col :span="12">
            <ElectricityPurchase :data="ElectricityPurchaseData1" :orderData="orderData1" />
          </el-col>
          <el-col :span="12">
            <ElectricityPurchase :data="ElectricityPurchaseData2" :orderData="orderData1" />
          </el-col>
        </el-row>
        <el-row class="mr_vertical_10">
          <Price />
        </el-row>
      </template>
    </BaseSlot>
    <!-- <el-dialog
      :title="dlgTitle"
      :visible.sync="dlgVib"
      @closed="closeDlg"
      append-to-body
      width="60%"
    >
      <component
        ref="dlgCpt"
        :is="dlgCpt"
        :data="dlgData"
        :type="dlgCptType"
        :action="action"
        :categoryType="categoryType"
        :choice="action == 'search'"
        :selected="selected"
        @selected="selectedf"
        @close="dlgVib = false"
        @locale="locale"
        @refresh="init"
      />
      <el-row type="flex" justify="center">
        <el-button
          size="small"
          type="primary"
          @click="
            () => {
              $refs.dlgCpt.submit();
            }
          "
          >确定</el-button
        >
        <el-button size="small" @click="dlgVib = false">关闭</el-button>
      </el-row>
    </el-dialog>-->
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import OrderDetail from "./common/orderDetail.vue";
import ElectricityPurchase from "./common/electricityPurchase.vue";
import Price from "./common/price.vue";

@Component({
  components: {
    BaseSlot,
    ElectricityPurchase,
    OrderDetail,
    Price
  }
})
export default class MyApplication extends Vue {
  protected ElectricityPurchaseData1: any = {
    idName: "ElectricityQuantity",
    titleName: "购电电量（度）"
  };
  protected ElectricityPurchaseData2: any = {
    idName: "Price",
    titleName: "购电价格（元）"
  };
  protected orderData: any = null;

  protected orderData1: any = null;

  protected created() {
    this.init();
  }

  protected async init() {
    const params: any = {
      // page_no: 1,
      // page_size: 1000
    };
    await this.$api.getOrdersStat(params).then((response: any) => {
      this.orderData = response.data;
      this.orderData1 = this.orderData.periods;
    });
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
.mr_w_10 {
  margin: 0 10px;
}
.margin-right {
  margin-right: 30px;
}
</style>


